<template>
  <div class="footer">
    <!-- 友情链接 -->
    <div class="links">
      <span>友情链接：</span>
      <a href="https://www.xmdeyy.com" target="_blank" class="active">厦门医学院附属第二医院</a> &nbsp;| &nbsp;
      <a href="https://www.hqu.edu.cn/" target="_blank">华侨大学</a>
    </div>
    <!-- 网站介绍 -->
    <div class="footer-bar">
      <a @click="openModal(0)">网站介绍</a> &nbsp;| &nbsp; <a @click="openModal(1)">意见反馈</a> &nbsp;| &nbsp;
      <a @click="openModal(2)">联系我们</a>
    </div>
    <!-- 版权所有 -->
    <div class="copyright">
      <span>版权所有：厦门医学院附属第二医院/计算机科学与技术学院</span>
    </div>
    <!-- 地址 -->
    <div class="address">
      <span>地址：福理省厦门市集美区集美大通668号</span>
    </div>
  </div>
  <!-- 弹窗 -->
  <a-modal
    v-model:open="open"
    :title="modalTitle"
    :footer="null"
    :destroy-on-close="true"
    :body-style="{ borderTop: ' 2px solid #304253' }"
    :width="628"
    @cancel="handleCancel"
  >
    <div class="content">
      <p v-html="barContent[activeIndex].content"></p>
      <a-config-provider
        :theme="{
          token: {
            colorPrimary: '#2b4b68'
          }
        }"
        ><a-form v-if="barContent[activeIndex].type == 'form'" ref="formRef" layout="vertical" :model="formState" :rules="rules">
          <a-form-item ref="feedback" label="信息内容" name="feedback">
            <a-textarea v-model:value="formState.feedback" placeholder="请填写信息内容" :auto-size="{ minRows: 6 }" />
          </a-form-item>
          <a-form-item ref="email" label="回复邮箱" name="email">
            <a-input v-model:value="formState.email" placeholder="请填写邮箱" />
          </a-form-item>
          <a-form-item class="submit-item">
            <a-button type="primary" block @click="handleSubmit">确定</a-button>
          </a-form-item>
        </a-form>
      </a-config-provider>
    </div>
  </a-modal>
</template>

<script setup lang="ts">
import { addFeedbackRecord } from "@/db"
import { notification } from "ant-design-vue"
import { Rule } from "ant-design-vue/es/form/interface"
import { computed, reactive, ref } from "vue"
const open = ref<boolean>(false)
let activeIndex = ref<number>(-1)
const barContent = [
  {
    title: "网站介绍",
    type: "text",
    content:
      "闽南药膳库按疾病类型划分为多个子库，所有病例均为真实临床案例。每个病例在介绍基本情况诊断、治疗设计过程、治疗过程的基础上，还加入对于治疗设计的思考、随访、总结和疾病解析再现临床诊疗的真实过程。"
  },
  {
    title: "意见反馈",
    type: "form",
    content: "您好! 很高兴为您服务，请有什么可以帮到您? 请您留下信息，我们将尽快回复您。"
  },
  {
    title: "联系我们",
    type: "text",
    content:
      "<ul><li>夏门医学院附属第二医院 255157116@qq.com@hqu.edu.cn</li><li>大学计算机科学与技术学院 wanghuazhen@hqu.edu.cn</li></ul>"
  }
]
const formRef = ref()

const formState: { email: string; feedback: string } = reactive({
  email: "",
  feedback: ""
})
const rules: Record<string, Rule[]> = {
  email: [{ required: true, message: "请输入回复邮箱", trigger: "blur" }, { type: "email" }],
  feedback: [
    { required: true, message: "请输入反馈内容", trigger: "blur" },
    { min: 8, max: 1000, message: "内容长度为 8至1000", trigger: "blur" }
  ]
}

let modalTitle = computed(() => {
  switch (activeIndex.value) {
    case -1:
      return ""
    default:
      return barContent[activeIndex.value].title
  }
})

const openModal = (index: number) => {
  open.value = true
  activeIndex.value = index
}

const handleSubmit = () => {
  formRef.value.validate().then(async () => {
    let { code, message } = await addFeedbackRecord(formState.email, formState.feedback)
    notification.open({
      type: code == 0 ? "success" : "error",
      message
    })
    handleCancel()
    open.value = false
  })
}

const handleCancel = () => {
  formState.email = ""
  formState.feedback = ""
}
</script>

<style lang="scss" scoped>
.footer {
  padding: 24px 16px 8px;
  text-align: center;
  color: #2c4c68;
  background: #e6e6e6;
  .links {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 14px;
    a {
      color: #2c4c68;
      text-decoration: none;
    }
    .active {
      color: #e45b5b;
    }
  }
  .footer-bar {
    margin: 18px 0 32px;
    a {
      cursor: pointer;
    }
  }
  .copyright,
  .address {
    font-size: 13px;
    margin: 16px 0;
  }
}
.content {
  padding: 24px 0;
  color: #2c4c68;
  line-height: 32px;
}
</style>
